<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>评价晒单</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center my_order comment comment_pic">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
       评价中心
    </header>



    <section class="main">
        <div class="container">
            <div class="score">
                <div class="thumnail">
                    <img src="img/order_pic.jpg" alt="">

                </div>
                <div class="scores">
                    <p>评分</p>
                    <span class="block" id="startone">
                        <span class="star_score">
                            <a href="javascript:void(0)"></a>
                        </span> <i></i><em></em>
                    </span>
                </div>
                <div class="clear"></div>

            </div>

            <form action="" id="comment_area">
                <textarea name="" id="" cols="30" rows="10" placeholder="写下购买体会和使用心得来帮助其他小伙伴"></textarea>
                <div class="imgs">
                    <ul id="img_list" class="img_list">
                    </ul>
                    <input type="file" id="upload_img"  onchange="preview(this)">
                    <label for="upload_img"></label>
                    <div class="clear"></div>
                </div>


                <input type="submit" value="提交评价">
            </form>
        </div>

    </section>


</body>
<script src="js/jquery.js"></script>
<script src="js/startScore.js"></script>
<script>
    $(function () {
        var iStarW=$(".star_score a").width();
        scoreFun($("#startone"),{
            fen_d:iStarW,//每一个a的宽度
            ScoreGrade:5//a的个数 10或者
        });

    });
    var imgCount=-1;
    function preview(file) {
        console.log(imgCount);
        var prevBox = document.getElementById('img_list');
        var elLi=document.createElement("li");

        prevBox.appendChild(elLi);
        var prevItem=prevBox.getElementsByTagName("li");

        if(file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {

                prevItem[imgCount].innerHTML='<i></i><img src="' + evt.target.result + '" />';
                var elI= prevItem[imgCount].getElementsByTagName("i")[0];
                console.log(elI);
                elI.onclick=function(){
                    prevItem[imgCount].parentNode.removeChild(elLi);
                    imgCount--;
                    if(imgCount<4){
                        document.getElementById("upload_img").removeAttribute("disabled");
                    }
                    return;
                }
            }
            reader.readAsDataURL(file.files[0]);
            imgCount++;
        } else {
            prevItem[imgCount].innerHTML = '<i></i><div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            var elI= prevItem[imgCount].getElementsByTagName("i")[0];
            console.log(elI);
            elI.onclick=function(){
                console.log("1111");
                prevItem[imgCount].parentNode.removeChild(elLi);
                imgCount--;
                if(imgCount<4){
                    document.getElementById("upload_img").removeAttribute("disabled");
                }
                return;
            }
            imgCount++;
        }

        if(imgCount==4){
            document.getElementById("upload_img").setAttribute("disabled","disabled");
        }

    }

</script>
</html>